<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>Brave Responsive Business Template</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]>
        <link rel="stylesheet" href="stylesheets/ie7.css">
    <![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    <!-- Fonts
	================================================== -->
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
</head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline"><div class="headerline"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <!--div class="tiledbackground"></div-->
    <img src="images/bg1.jpg" alt="" id="background" />
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index-2.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">HOME<br/><span>Info About Us</span></a>
                            <ul>  
                                <li><a href="index-2.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Another Layout Example</a></li>
                                <li><a href="index_noslider.html">No Slider</a></li>
                            </ul>
                        </li>
                        <li><a href="#">FEATURES<br/><span>What We Offer</span></a>
                            <ul> 
                            	<li><a href="page_about.html">About / Services</a></li>
                            	<li><a href="page_pricing.html">Pricing</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_faq.html">FAQ</a></li>
                                <li><a href="page_full.html">Full Page & Background Image</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">PORTFOLIO<br/><span>See Our Work</span></a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio Full</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">BLOG<br/><span>Latest News</span></a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">CONTACT<br/><span>Get In Touch</span></a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post">
                    <select>
                        <option value="">Navigation</option>
                    </select>
				</form>
				
            </div>
		</div>
        
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>Full Page Blog.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                    <li><a href="#" class="social_linkedin"></a><div>LinkedIn</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                </ul>
			</div>
            <!--div class="pagetitlebackground"></div-->
        </div>
        
        <!-- No Slider Spacer
		================================================== -->
        
        <div class="sixteen columns nosliderspacer"></div>
        
        <!-- Content Holder -->
		<div class="sixteen columns row textblock fullblog sideview">
        	
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">26</div>
                    <div class="year">2012</div>
                </div>
                <div class="blogimage">
                    <a href="#" data-text="" class="hovering"><img src="images/blog/blogpost1.jpg" alt="" class="scale-with-grid" /></a>
                </div> 
                <div class="blogtitle"><h4><a href="#">Blogpost With Image</a></h4></div>
                <div class="postinfo">
                    <span class="dateinfo">9 Feb 2012 · </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> · by Admin · <a href="#">3 Comments</a>
                </div> 
                <div class="postbody">
                    <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br/><br/><a href="#" class="button">Read More</a></div>
                </div><div class="clear"></div>
            </div> 
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="blogimage">
                    <div class="flexslider postslider clearfix">
                        <ul class="slides">
                            <li><img src="images/blog/blogpost_slide3.jpg" alt="" /></li>
                            <li><img src="images/blog/blogpost_slide1.jpg" alt="" /></li>
                            <li><img src="images/blog/blogpost_slide2.jpg" alt="" /></li>
                        </ul>
                    </div>
                </div>
                <div class="blogtitle"><h4><a href="#">Blogpost Slideshow</a></h4></div>
                 <div class="postinfo">
                    <span class="dateinfo">9 Feb 2012 · </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> · by Admin · <a href="#">3 Comments</a>
                </div>
                <div class="postbody">
                    <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br/><br/><a href="#" class="button">Read More</a></div>
                </div><div class="clear"></div>
            </div> 
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="blogimage">
                    <div class="scalevid">
                        <iframe src="http://player.vimeo.com/video/15076572?title=0&amp;byline=0&amp;portrait=0" width="640" height="360"></iframe>
                    </div>
                </div>
                <div class="blogtitle"><h4><a href="#">Blogpost Vimeo Video</a></h4></div>
                <div class="postinfo">
                    <span class="dateinfo">9 Feb 2012 · </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> · by Admin · <a href="#">3 Comments</a>
                </div>
                <div class="postbody">
                    <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br/><br/><a href="#" class="button">Read More</a></div>
                </div><div class="clear"></div>
            </div>
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="blogimage">
                    <div class="scalevid">
                        <iframe src="http://www.youtube.com/embed/KrRt46Ht_A0?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="640" height="360"></iframe>
                    </div>
                </div>
                <div class="blogtitle"><h4><a href="#">Blogpost Youtube Video</a></h4></div>
                <div class="postinfo">
                    <span class="dateinfo">9 Feb 2012 · </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> · by Admin · <a href="#">3 Comments</a>
                </div>
                <div class="postbody">
                    <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br/><br/><a href="#" class="button">Read More</a></div>
                </div>
                <div class="clear"></div>
            </div>
            
            <!-- Blogpost -->
            <div class="blogpost row">
                <div class="blogdate">
                    <div class="month">Feb</div>
                    <div class="day">17</div>
                    <div class="year">2012</div>
                </div>
                <div class="blogimage">
                    <div class="mediaitem"><audio width="100%" src="media/demosong.mp3" type="audio/mp3" controls="controls"></audio></div>
                </div>
                <div class="blogtitle"><h4><a href="#">Blogpost With Audio</a></h4></div>
                <div class="postinfo">
                    <span class="dateinfo">9 Feb 2012 · </span>in <a href="#">Company News</a>, <a href="#">Presentations</a> · by Admin · <a href="#">3 Comments</a>
                </div>
                <div class="postbody">
                    <div class="postcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br/><br/><a href="#" class="button">Read More</a></div>
                </div>
                <div class="clear"></div>
            </div>

            <!-- Pagination -->
                    
            <div class="blogpages">
                <ul>
                    <li><a href="#" class="selected">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            
            <div class="clear"></div>
		</div>
        
        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
   
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap">
    
    	<div class="footerclose"></div>
    
        <div class="footer">
        	<div class="sixteen columns">

                
                <div class="four columns clearfix widget alpha">
                   <h5>LATEST TWEETS</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                <div class="four columns widget">
                    <h5>POPULAR BLOG POSTS</h5>
                    <div class="widget_blogposts">
                        <ul>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog1.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Pretty Widgets</a></div>
                                <div class="subline">January 23, 2012</div>
                            </li>
                        	<li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog2.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Convenient Structure</a></div>
                                <div class="subline">January 21, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog3.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Another Blog Post</a></div>
                                <div class="subline">January 17, 2012</div>
                            </li>
                            <li class="clearfix">
                            	<a href="#" class="borderhover"><img src="images/thumbs/pop_blog4.jpg" alt="" /></a>
                                <div class="postlink"><a href="#">Responsive Layout</a></div>
                                <div class="subline">January 3, 2012</div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                          
                <div class="four columns widget">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <span class="lighti">Company Location</span><br/>
                        Brave Studios, Cologne City Branch<br/>
                        Mainstreet 123<br/>
                        50600, Cologne, Germany<br/><br/>
                        
                        <span class="lighti">How To Contact Us</span><br/>
                        Email: <a href="mailto:your@email.com" class="linkbg">info@yourdomain.com</a><br/>
                        Phone: 800.123.4567<br/><br/>
                        
                        <span class="lighti">Office Hours</span><br/>
                        Mondays-Friday: 09:00 - 18:00<br/>
                        Saturday: 10:00 - 15:00
                    </div>
                </div>

                <div class="four columns widget omega">
                    <h5>QUICK CONTACT</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#">
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onFocus="if(this.value == 'Name *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Name *'; }" value='Name *'/>
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onFocus="if(this.value == 'Email *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Email *'; }" value='Email *'/>
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onFocus="if(this.value == 'Message *') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send</button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div><div class="clear"></div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap">
    
    	<div class="footeropen"></div>
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>

<!-- End Document
================================================== -->
<div style="display:none"></div>
</body>
</html>